<template>
  <div class="lesson-materials">
    <ul class="check-tab">
      <li
        v-for="(item, index) in checkTab"
        :key="index"
        class="check-default"
        :class="{
          'check-active': checkPitch === item.id,
        }"
        @click="check(item)"
      >
        {{ item.name }}
      </li>
    </ul>
    <div class="main">
      <el-row>
        <el-col :span="24">
          <div class="title">
            <el-col class="item tit-item tit-name" :span="8">资料名称</el-col>
            <el-col class="item tit-item" :span="6">文件大小</el-col>
            <el-col class="item tit-item" :span="6">上传时间</el-col>
            <el-col class="item tit-item" :span="4">下载资料</el-col>
          </div>
          <ul>
            <li class="clearfix" v-for="(item, index) in materialsList" :key="index">
              <el-col class="item name" :span="8">
                <img
                  src="../../../../../../assets/image/onlineStudent/materials-ico.png"
                  alt=""
                />
                {{ item.material_name }}
              </el-col>
              <el-col class="item" :span="6">{{ item.material_size }}</el-col>
              <el-col class="item" :span="6">2020-06-20</el-col>
              <el-col class="item btn" :span="4">
                <img
                  src="../../../../../../assets/image/onlineStudent/download-ico.png"
                  alt=""
                />
              </el-col>
            </li>
          </ul>
        </el-col>
      </el-row>
      <div class="pagination" id="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size = addParam.pageSize
          layout="prev, pager, next, jumper"
          :total = totalCount
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.getLessonMaterials();
  },
  data() {
    return {
      addParam:{
        school_dns:'testwo.admin.longde999.cn',
        id:this.$route.query.id,
        type:1,
        pageSize:10,
        page:1
      },
      checkTab: [
        { id: 0, name: '全部' },
        { id: 1, name: '材料' },
        { id: 2, name: '辅料' },
        { id: 3, name: '其他' },
      ],
      checkPitch: 0,
      totalCount:0,
      materialsList:[]
    }
  },
  methods:{
     check(item){ 
       this.checkPitch =  item.id;
       this.addParam.type = item.id;
       this.getLessonMaterials();
     },
     handleSizeChange(val) {
       this.addParam.pageSize = val;
       this.getLessonMaterials();
     },
     handleCurrentChange(val) {
       this.addParam.page = val;
       this.getLessonMaterials();
     },
     getLessonMaterials(){
       this.$axios.post("/course/material", this.addParam).then(res => {
         if (res.code == 200) {
           this.materialsList = res.data;
           this.totalCount = res.page.total;
         }
       });
     }
  }
}
</script>

<style lang="less" scoped>
@import '../../../../common/index.less';
.check-tab {
  .flex();
  margin-bottom: 10px;
  li {
    cursor: pointer;
    margin-right: 7px;
  }
}
.main {
  .title {
    .before(10px, 0px);
    .flex();
    padding: 15px 0;
    background: #f5f6f6;
  }
  ul {
    height: 650px;
    overflow-y: auto;
  }
  li {
    padding: 15px 0;
    border-bottom: solid 1px #f5f5f5;
  }
  .item {
    text-align: center;
  }
  .name,
  .tit-name {
    text-align: left;
    padding-left: 20px;
  }
  .tit-name {
    padding-left: 40px;
  }
}
.pagination{
  margin-top: 100px;
}
</style>
